﻿@using System.Web.Script.Serialization;

@{
    if (Session["Clinic"] != null)
    {
        HMS.Web.Helpers.Clinic clinic = new HMS.Web.Helpers.Clinic();
        clinic = (HMS.Web.Helpers.Clinic)Session["Clinic"];
        ViewBag.Title = clinic.Name;
    }
    else
    {
        ViewBag.Title = "EditAppointment";
    }
}
@model List<HMS.DataContract.Response.DoctorAppointmentResponse>



<link href="~/Fonts/GoogleFonts.css" rel="stylesheet" />
<link href="~/Content/bootstrap-switch.min.css" rel="stylesheet">
<link href="~/Content/bootstrap-spinner.css" rel="stylesheet">
<link href="~/Content/shadowbox.css" rel="stylesheet" />
<script type="text/javascript" src="~/Scripts/shadowbox.js"></script>
<link href="~/Content/jquery.bxslider.css" rel="stylesheet" />
<script src="~/Scripts/jquery.bxslider.min.js"></script>

<section class="container edit-appointment">

    <div class="page-heading col-lg-12 col-xs-12 col-md-12 pull-left">
        <hr />
        <h1>Add/Edit appointments<span id="doctorName"></span></h1>
        <hr />
    </div>
    @{
        HMS.DataContract.Response.UserInfo user = Session["userInfo"] != null ? (HMS.DataContract.Response.UserInfo)Session["userInfo"] : null;
        string hidden = "";
        var userType = "";
        if (user == null || (user != null && user.Detail == "P"))
        {
            hidden = "display:none";
            userType = user == null ? "" : "patient";
            <div class="col-lg-12 col-xs-12 col-md-12 pull-left" style="margin-bottom: 10px">
                <select id="location" class="form-control pull-left" style="width: 20%">
                    <option id="" value="">(Select Location)</option>
                </select>
                <select id="doctors" class="form-control pull-left" style="width: 20%;margin-left:5px;">
                    <option id="" value="">(Select Doctor)</option>
                </select>

            </div>
        }
        else
        {
            userType = "doctor";
        }
    }
    <div class="bs-example col-lg-12 col-xs-12 col-md-12 pull-left" style="@hidden">
        <div style="margin-bottom: 5px">
            <div id="accordion">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4 class="panel-title">
                            <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" class="accord">Booking details</a>
                        </h4>
                    </div>
                    <div id="collapseOne" class="accordDiv">
                        <div class="panel-body">
                            <div class="form-group">
                                <div id="the-basics" class="input-group">
                                    <span class="input-group-addon glyphicon glyphicon-user"></span>
                                    @{
                                        if (string.IsNullOrEmpty(hidden) || user == null)
                                        {
                                            <input id="product_search" type="text" data-provide="typeahead" class="form-control" value="@Model[0].Patient.Name" placeholder="Patient Name" />
                                        }
                                        else
                                        {
                                            <input id="product_search" type="text" data-provide="typeahead" class="form-control" value="@Model[0].Patient.Name" disabled="disabled" placeholder="Patient Name" />
                                        }
                                    }

                                    <input type="hidden" id="SelectedPatient" />
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="input-group">
                                    <span class="input-group-addon glyphicon glyphicon-earphone"></span>
                                    <input id="bookDetailPhone" maxlength="10" type="text" class="form-control" placeholder="Contact Number" value="@Model[0].Patient.Phone">
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="input-group col-lg-3 col-md-3 col-xs-4 pull-left">
                                    <span class="input-group-addon glyphicon glyphicon-time"></span>
                                    @{var apptTimeNew = Model[0]._AppointmentDateTime.Split(' ')[0] + " (" + Model[0]._AppointmentDateTime.Split(' ')[1] + ")";}
                                    @{var appointmentDateTime = Model[0].AppointmentDateTime.ToString("dd'/'MM'/'yyyy") + " (" + Model[0].AppointmentDateTime.ToString("HH:mm:tt") + ")";}
                                    <input type="text" id="apptDate" class="datetimepicker form-control" disabled="disabled" placeholder="Select date time" value="@apptTimeNew" />


                                </div>
                                <div class="follow-up pull-left  col-lg-3 col-md-3 col-xs-3">
                                    <div class="input-group input-group-sm">
                                        <span class=" input-group-addon glyphicon glyphicon-retweet"></span>
                                        @{
                                            if (Model[0].FollowUpStatus)
                                            {
                                                <input type="checkbox" id="chkFollowup" data-label-text="Flw up" data-on-text="Yes" data-off-text="No" checked class="form-control" />
                                            }
                                            else
                                            {
                                                <input type="checkbox" id="chkFollowup" data-label-text="Flw up" data-on-text="Yes" data-off-text="No" class="form-control" />
                                            }
                                        }

                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="input-group">
                                    <span class="input-group-addon glyphicon glyphicon-question-sign"></span>
                                    <input id="bookDetailPurpose" type="text" class="form-control" placeholder="Purpose" value="@Model[0].Purpose">
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
            @{if (Model.Count() > 1 && Model[1].AppointmentDateTime != DateTime.MinValue && Model[1].AppointmentDateTime < Model[0].AppointmentDateTime)
            {
                <div class="panel panel-default" id="lastApptPanel" style="@hidden">
                    <div class="panel-heading">
                        <h4 class="panel-title">
                            <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" class="collapsed accord">
                                Last appointment details
                            </a>
                        </h4>
                    </div>
                    <div id="collapseTwo" class="accordDiv">
                        <div class="panel-body">
                            <div class="form-group col-lg-6">
                                <div class="input-group">
                                    <span class="input-group-addon glyphicon glyphicon-time"></span>
                                    <label class="form-control" id="lastApptDet">@Model[1]._AppointmentDateTime</label>
                                </div>
                            </div>
                            <div class="form-group col-lg-6">
                                <div class="input-group">
                                    <span class="input-group-addon glyphicon glyphicon-question-sign"></span>
                                    <label class="form-control" id="lastApptPurpose">@Model[1].Purpose</label>
                                </div>
                            </div>
                            <div class="form-group col-lg-12">
                                <ul id="prevAppt_@Model[1].Id" class="bxslider"></ul>
                            </div>

                            <div id="divPrevPrescription" class="form-group col-lg-12">

                            </div>
                        </div>
                    </div>
                </div>
            }
            else
            {
                <div class="panel panel-default" id="lastApptPanel" style="display:none">
                    <div class="panel-heading">
                        <h4 class="panel-title">
                            <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" class="collapsed accord">
                                Last appointment details
                            </a>
                        </h4>
                    </div>
                    <div id="collapseTwo" class="accordDiv">
                        <div class="panel-body">
                            <div class="form-group col-lg-6">
                                <div class="input-group">
                                    <span class="input-group-addon glyphicon glyphicon-time"></span>
                                    <label class="form-control" id="lastApptDet"></label>
                                </div>
                            </div>
                            <div class="form-group col-lg-6">
                                <div class="input-group">
                                    <span class="input-group-addon glyphicon glyphicon-question-sign"></span>
                                    <label class="form-control" id="lastApptPurpose"></label>
                                </div>
                            </div>
                            <div class="form-group col-lg-12">
                                <ul id="LastprevAppt" class="bxslider"></ul>
                            </div>
                        </div>
                    </div>
                </div>
            }
            }
            @{ if (Model[0].Id != 0)
             {
                <div class="panel panel-default" id="divVisitDetails" style="@hidden">
                    <div class="panel-heading">
                        <h4 class="panel-title">
                            <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree" class="collapsed accord">
                                Visit details
                            </a>
                        </h4>
                    </div>
                    <div id="collapseThree" class="accordDiv">
                        <div class="panel-body">
                            <div class="form-group">
                                <div class="input-group pull-left">
                                    <button type="button" id="btnAddImages" class="btn btn-primary pull-right">Add Images</button>
                                </div>
                                @using (Html.BeginForm("UploadImage", "Appointment", FormMethod.Post, new { EncType = "multipart/form-data", @class = "pull-right" }))
                                {
                                    <input type="file" class="btn btn-primary" onchange="submit()" name='files' title="Browse" multiple id="upload" />
                                    <input type="hidden" name="currentPage" value="Appointment/EditAppointment" />
                                <ul id="selectedFileList"></ul>
                                    }
                            </div>
                            <div class="divSpace"></div>
                                <div class="form-group">
                                    <ul class="bxslider" id="addedImages"></ul>
                                </div>
                            <div class="divSpace"></div>
                                <div id="divPrescription" class="form-group">

                                </div>

                                <div class="form-group">
                                    <textarea id="txtPrescription" placeholder="Enter Details" class="form-control" rows="3"></textarea>

                                </div>
                                <div>
                                    <button type="button" id="btnSavePrescription" class="btn btn-primary pull-right">Save Details</button>
                                </div>

                            </div>
                    </div>
                </div>
             }
            }
            <div class="panel panel-default" style="@hidden">
                <div class="panel-heading">
                    <h4 class="panel-title">
                        <a data-toggle="collapse" data-parent="#accordion" href="#collapseFour" class="collapsed accord">
                            Patient Details
                        </a>
                    </h4>
                </div>
                <div id="collapseFour" class="collapse accordDiv">
                    <div class="panel-body">
                        <div class="form-group">
                            <div id="the-basics" class="input-group">
                                <span class="input-group-addon">@@</span>
                                <input id="emailId" type="text" class="form-control" placeholder="Email" value="@Model[0].Patient.Email">
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="input-group">
                                <span class="input-group-addon glyphicon glyphicon-earphone"></span>
                                <input type="text" id="patientDetailPhone" class="form-control" placeholder="Contact Number" value="@Model[0].Patient.Phone">
                            </div>
                        </div>
                        <div class="row">
                            <div class="form-group col-md-2">
                                <div class="input-group">
                                    <span class="input-group-addon">Age</span>
                                    <input type="text" id="age" class="form-control" disabled placeholder="Age" />
                                    <input type="text" id="dateOfBirth" class="datepicker form-control" style="width : 150px" placeholder="Select DOB" value="@Model[0].Patient.DOB.ToString("dd'/'MM'/'yyyy")" />
                                    @*<input id="age" type="text" value="0" name="age" class="form-control datepicker">*@
                                </div>
                            </div>

                            <div class="form-group col-md-offset-1 col-md-3">
                                <div class="input-group input-group-sm">
                                    @{
                                        if (Model[0].Patient.Gender.Id == 1)
                                        {
                                            <input type="checkbox" id="chkGender" data-label-text="Gender" data-on-text="Male" data-off-text="Female" checked class="form-control">
                                        }
                                        else
                                        {
                                            <input type="checkbox" id="chkGender" data-label-text="Gender" data-on-text="Male" data-off-text="Female" class="form-control">
                                        }
                                    }

                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="input-group">
                                <span class="input-group-addon glyphicon glyphicon-question-sign"></span>
                                <input type="text" class="form-control" placeholder="Allergies" id="patientAllergies" value="@Model[0].Patient.Allergies">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="btn-toolbar">
            <button type="button" id="completeAppt" class="btn btn-primary pull-right pull-right">Complete</button>
            <button type="button" id="btnDelete" class="btn btn-primary pull-right">Delete</button>
            <button type="button" id="btnSave" class="btn btn-primary pull-right">Save</button>
        </div>
        @{}
        <input type="hidden" id="DocApptId" value="@Model[0].Id" />
        <input type="hidden" id="newDocApptId" />
    </div>
    <!--Main div ends here-->

</section>



<script src="~/Scripts/bootstrap-typeahead.js" type="text/javascript"></script>
<script src="~/Scripts/bootstrap-switch.min.js" type="text/javascript"></script>
<script src="~/Scripts/jquery.spinner.js" type="text/javascript"></script>
<script src="~/Scripts/bootstrap-combobox.js" type="text/javascript"></script>
<script src="~/Scripts/addeditAppts.js" type="text/javascript"></script>

<script src="~/Scripts/jquery.mousewheel-3.0.6.pack.js" type="text/javascript"></script>
<link href="~/Content/jquery.fancybox.css" rel="stylesheet" type="text/css" media="screen" />
<script src="~/Scripts/jquery.fancybox.pack.js" type="text/javascript"></script>
<link href="~/Content/jquery.fancybox-buttons.css" rel="stylesheet" type="text/css" />
<link href="~/Content/jquery.fancybox-thumbs.css" rel="stylesheet" type="text/css" />
<script src="~/Scripts/jquery.fancybox-buttons.js" type="text/javascript"></script>
<script src="~/Scripts/jquery.fancybox-media.js" type="text/javascript"></script>
<script src="~/Scripts/jquery.fancybox-thumbs.js" type="text/javascript"></script>
<script src="~/Scripts/bootstrap.file-input.js" type="text/javascript"></script>
@*<link href="~/Content/slick.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="~/Scripts/slick.min.js"></script>*@
<script src="~/Scripts/jquery.liquidcarousel.js"></script>

<script type="text/javascript">
    var _appointmentId = '@Model[0].Id';
    if (parseInt('@Model[0].Id') == 0) {
        $("#btnDelete").css("display", "none");
        $("#completeAppt").css("display", "none");
    }
    @{ int ApptStatusId = Model[0].AppointmentStatus != null ? Model[0].AppointmentStatus.Id : 0;}
    if (parseInt('@ApptStatusId') == 2) {
        $("#completeAppt").css("display", "block");
        $("#btnDelete").css("display", "block");
    }
    else if (parseInt('@ApptStatusId') == 3) {
        $("#completeAppt").css("display", "none");
        $("#btnDelete").css("display", "none");
        $("#btnSave").css("display", "none");
    }
    else {
        $("#completeAppt").css("display", "none");
        $("#btnDelete").css("display", "none");
    }
    var prevAppointment = "";
    var appointmentDoctorObject = JSON.parse('@Html.Raw(new JavaScriptSerializer().Serialize(Model[0]))')
    var appt = JSON.parse('@Html.Raw(new JavaScriptSerializer().Serialize(Model))')
    if (appt.length > 1) {
        prevAppointment = appt[1];
    }
    var userType = '@userType';

    var isAnynomous = '@userType' ? false : true;
    $("#btnAddImages").click(function () { location.href = "/Appointment/CaptureImages"; });
</script>

